<template>
    <div class="change_tele">
        <div class="header">
            <i @click='goBack' class="iconfont icon-xia"></i>重置登录密码
        </div>
        <div class="content">
            <li>此手机号用于接收短信验证码:</li>
            <div class="tele">{{tele}}</div>
            <div class="inp">
                <span class="sp1">请输入验证码</span>
                <div class="txt">
                    <input ref='code' type="text" style="border:0;outline: none"  value="请输入验证码" @click="inp">
                    <span style="right: 0;top: 0;" class="sp2" @click="getcode">{{gc}}</span>
                </div>
            </div>
            <div class="bt"><button class="confirm" style="outline: none" @click="qd">确定</button></div>
        </div>
    </div>
</template>

<script>

import '@/css/change_tele.css';
import { Toast } from 'mint-ui';

export default {
  name: 'change_tele',
  data() {
    return {
      tele: '',
      gc: '获取验证码',
      code: '',
    };
  },
  created() {
    this.tele = this.$store.state.userinfo.telphone;
  },
  methods: {
    inp() {
      const inp = document.querySelector('input');
      const sp1 = document.querySelector('.sp1');
      inp.value = '';
      inp.style.color = '#000000';
      sp1.style.display = 'block';
    },
    goBack() {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/');
    },
    async getcode() {
      let time_number = 60;
      this.gc = time_number;
      this.timer = setInterval(() => {
        time_number--;
        this.gc = `${time_number}秒`;
        if (this.gc == 0) {
          this.gc = '重新发送';
          clearInterval(this.timer);
        }
      }, 1000);
      const res = await this.$api.post('/user/reg', { telphone: this.tele });
      const _res = res.data.info;
      const code = _res._code;
      Toast({
        message: `验证码：${code}`,
        duration: 3000,
      });
    },
    async qd() {
      const code = this.$refs.code.value;
      this.code = code;
      const res = await this.$api.post('/user/login', {
        telphone: this.tele,
        type: '2',
        code: this.code,
      });
      const info = res.data.info;
      if (res.data.state) {
        Toast({
          message: '玩命加载中',
          duration: 3000,
        });
        setTimeout(() => { this.$router.push({ name: 'change_tele_fstep' }); }, 1000);
      } else {
        Toast({
          message: `${info}`,
          duration: 3000,
        });
      }
    },
  },
};
</script>

<style scoped>

</style>
